<template>
    <div class="feedback_box outer_shadows">
        <input type="text" placeholder="问题标题，限制30字以内" maxlength="30" v-model.trim="problems.header" class="feedback_title">
        <br>
        <textarea class="feedback_content" placeholder="问题描述，500字以内" maxlength="500" v-model.trim="problems.body"></textarea>
        <button class="feedback_but" @click="sub">提交</button>
    </div>
</template>
<!--意见反馈-->
<script setup>
import store from "@/store/index.js";
import {ref} from "vue";
import api from "@/request/index.js";
//需要提交的反馈信息
const problems = ref({
    header: "",
    body: "",
    subject:"意见问题反馈"//主题
});

//提交反馈信息
const sub = () => {
    if(!problems.value.body || !problems.value.header){
        store.commit('info_sub', {msg: '请将信息填写完整！', type: 'warn'})
        return;
    }
    api.getFeedback(problems.value).then((res)=>{
        if(res.data.code === 200 ){
            problems.value.body = '';
            problems.value.header = '';
            store.commit('info_sub', {msg: '感谢您的反馈', type: 'normal'})
        }else {
            store.commit('info_sub', {msg: '提交失败,请联系管理员!', type: 'error'})
        }
    });
};
</script>

<style scoped>
.feedback_box {
    max-width: 800px;
    text-align: center;
    margin: auto;
}

.feedback_title {
    width: 100%;
    height: 45px;
    outline: none;
    text-indent: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(96, 97, 98, 0.39);
    border-radius: 1px;
    color: #6da6e1;
    background: transparent;
}

.feedback_content {
    resize: none;
    width: 100%;
    min-height: 300px;
    outline: none;
    padding: 10px;
    border: 1px solid rgba(96, 97, 98, 0.39);
    border-radius: 1px;
    color: #6da6e1;
    background: transparent;
}

.feedback_but {
    border: 0;
    outline: none;
    color: white;
    background: #6da6e1;
    height: 40px;
    line-height: 40px;
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 1px;
}

.feedback_but:hover {
    opacity: .9;
}
</style>